import { useContext } from 'react'
import TodoContext from '../../TodoContext'

const TodoList = () => {
  const { todos, onToggleTodo, onDeleteTodo } = useContext(TodoContext)

  return (
    <ul className='todo-list'>
      {/* 编辑样式：editing  已完成样式：completed */}
      {todos.map(todo => {
        return (
          <li key={todo.id} className={todo.done ? 'completed' : ''}>
            <div className='view'>
              <input
                className='toggle'
                type='checkbox'
                checked={todo.done}
                onChange={() => onToggleTodo(todo.id)}
              />
              <label>{todo.text}</label>
              <button
                className='destroy'
                onClick={() => onDeleteTodo(todo.id)}
              />
            </div>
            <input className='edit' defaultValue='Create a TodoMVC template' />
          </li>
        )
      })}
    </ul>
  )
}

export default TodoList
